<template>
  <div class="history">
    <section>
      <span>历史记录</span>
      <van-icon name="delete-o" @click="delectall" />
    </section>
    <div>
      <van-tag
        v-for="(item, index) in history"
        :key="item"
        closeable
        size="large"
        type="primary"
        @close="del(index)"
        @click="$emit('tagSearch', item)"
      >
        <!--  @click="$emit('tagSearch', item)" 子传父，实现历史记录的快速搜索 -->
        {{ item }}
      </van-tag>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["history"]), // 辅助函数获取数据
  },
  methods: {
    // 辅助函数获取方法
    ...mapMutations(["delectall", "del"]),
  },
};
</script>

<style lang="scss">
.history {
  padding: 10px;
  box-sizing: border-box;
  font-size: 15px;
  .van-icon {
    float: right;
  }
  div {
    margin-top: 10px;
    .van-tag {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>
